<template>
  <div class="infowindows" v-if="mapstatus" v-show="sttp4show">
    <!-- <div v-if="infoshow == 0" >
      <ComInfoLine :ComInfoData="ComInfoData"></ComInfoLine>
    </div>
    <div v-if="infoshow == 1" >
      <ComInfoPoint :ComInfoData="ComInfoData"></ComInfoPoint>
    </div> -->

    <!-- <ul>
      <li>{{ paramsData }}-1</li>
      <li>{{ infotype }}-2</li>
      <li>{{popupType}}-3</li>
    </ul> -->
    <!-- <ClickPopup v-if="isClick" :paramsData="paramsData"/> -->
    <!-- <HoverPopupVue v-if="isHover" :paramsData="paramsData"/> -->
    <GXPopup
      :paramsData="paramsData"
      v-show="isShowMainPopup"
      v-if="isGuanXian"
    />
    <POIMainPopup
      :paramsData="paramsData"
      :infodata="infodata"
      v-show="isShowMainPopup"
      v-if="!isGuanXian"
    />
    <div class="click-close" @click="closeinfo" v-if="isShowMainPopup"></div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
// import ClickPopup from '@/components/ClickPopup.vue';
import POIMainPopup from "@/components/infowindows-model/POIMainPopup.vue";
// import POICurrentData from '@/components/POICurrentData.vue';
import GXPopup from "@/components/infowindows-model/GXPopup.vue";

import ComInfoLine from "../../components/infowindows-model/ComInfoLine.vue";
import ComInfoPoint from "../../components/infowindows-model/ComInfoPoint.vue";

export default {
  components: {
    // ClickPopup,
    POIMainPopup,
    // POICurrentData,
    GXPopup,
    ComInfoLine,
    ComInfoPoint,
  },
  data() {
    return {
      componentType: "",
      componentName: "",
      isShowMainPopup: false,
      infoshow: -1,
      ComInfoData: null,
      infodata:null,
      sttp4show:false
    };
  },
  props: {
  
    // infotype: {
    //   type: String,
    //   default: "",
    // },
  },
  mounted() {
    // Bus.$on("setIsShow", (e) => {
    //   this.setIsShow(e);
    //   // this.setToolBarItemActive(value);
    // });
    Bus.$on("infodata", (e) => {
      if (typeof e == "string") {
        this.infodata = e;
      }
      // console.log(typeof e, e, "eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
      if (JSON.parse(e).sttp == 4 && e.search("deviceId")) {
        this.isShowMainPopup = false;
        this.sttp4show=false
        // this.$store.commit("changemapstatus", false);
      } else {
        this.isShowMainPopup = true;
        this.sttp4show=true
        // this.$store.commit("changemapstatus", true);
      }

      // if (e.sttp == '4') {
      //   this.mapstatus = false;
      //   //
      // } else {
      //   // this.isShowMainPopup = true;
      // }
    });
    Bus.$on("dosetmethodes", (e) => {
      this.isShowMainPopup = false;
    });
    Bus.$on("dosetmethodes1", (e) => {
      this.isShowMainPopup = false;
    });
    Bus.$on("sttp4show", (e) => {
      this.sttp4show = false;
    });
  },
  computed: {
    mapstatus() {
      return this.$store.getters.mapstatus;
    },

    // popupType: function () {
    //   if (this.infotype == 'click') {
    //     this.componentName = 'ClickPopup'
    //   } else {
    //     this.componentName = 'HoverPopupVue'
    //   }
    // },
    // isHover: function () {
    //   let params = JSON.parse(this.infodata);
    //   if (params == null) {
    //     return false
    //   }
    //   return params.sttp != 4 && this.infotype == 'movement'
    // },
    // isClick: function () {
    //   let params = JSON.parse(this.infodata);
    //   if (params == null) {
    //     return false
    //   }
    //   return params.sttp != 4 && params.sttp != 5 && this.infotype == 'click'
    // },
    paramsData: function () {
      // console.log("+++++++++++",this.infodata);
      if (this.infodata) {
        this.isShowMainPopup = true;
      }
      return JSON.parse(this.infodata);
    },
    isGuanXian: function () {
      let data = JSON.parse(this.infodata);
      if (data && data.UserID) {
        return true;
      } else {
        return false;
      }
    },
    // isShowMainPopup: function() {
    //   console.log("+++++++++++",JSON.parse(this.infodata));
    // }
  },
  watch: {
    infodata(newval, oldval) {
      // console.log(newval);
      this.ComInfoData = newval;
      let data = JSON.parse(newval);
      if (data && data.UserID) {
        // return 0;
        this.infoshow = 0;
      } else {
        this.infoshow = 1;

        // return 1;
      }

      // Bus.$emit("infowindowsIF", true);
      // console.log(this.mapstatus)
      // switch (this.mapstatus) {
      //   case true:
      //     Bus.$emit("btnClicks2", true);
      //     break;
      //   case false:
      //     Bus.$emit("btnClicks2", false);
      //     break;
      //   default:
      //     break;
      // }
      // console.log(newval, "infodatanewval");
    },
  },
  methods: {
    // setIsShow(value) {
    //   this.isShowMainPopup = value;
    // },
    closeinfo() {
      this.isShowMainPopup = false;
      Bus.$emit("initlineandpoint", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.infowindows {
  // background-color: #fff;
  // color: black;
  // border: 1px solid red;
  // background-color: red;
  position: absolute;
  z-index: 10;
  // top: 10px;
  display: block;
  // width: 419px;
  // height: 300px;
  .close {
    //   position: absolute;
    //   top: 50px;
    //   right: 20px;
    //   background: red;
    //   color: #ffffff;
  }
  .click-close {
    position: absolute;
    top: 44px;
    right: 20px;
    width: 14px;
    height: 15px;
    background: url("@/assets/poipopup/poi_popup_close.png");
    // position: relative;
    // top: -24px;
    // left: 658px;
    cursor: pointer;
  }
}
</style>
